<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书修改</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.min.js"></script>
</head>
<body>
    <h2>修改图书</h2>
    
    <div id="form"></div>

    <button id="btn">提交</button>
   


    <script id="form-content" type="text/html">
        <input type="hidden" name="_id" value="<%=book._id%>" id="_id">
        书名:<input type="text" name="name" value="<%=book.name%>" id="name"><br/>
        作者:<input type="text" name="author" value="<%=book.author%>" id="author"><br/>
        价格:<input type="number" name="price" value="<%=book.price%>" id="price"><br/>
    </script>


    <script>

        //读取query参数指定参数名的值

        function getQueryValue(name){
            var str = location.href.split('?')
            var query=str[1];
            var vars=query.split('&');
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == name){
                    return pair[1];
                }
            }
            return(false);
         }

         //根据参数请求获取图书信息显示

         async function getBook(){
            //得到id参数
            const id = getQueryValue('id')
            //发ajax请求
            const response = await axios(`http://localhost:3007/book/${id}`)
            const book = response.data.data

            const html = template('form-content',{book})

            document.getElementById('form').innerHTML = html
         }

         getBook()

         document.getElementById('btn').onclick = async()=>{
            //收集数据
            const _id = document.getElementById('_id').value
            const name = document.getElementById('name').value
            const author = document.getElementById('author').value
            const price = document.getElementById('price').value
            //提交修改图书的ajax请求
            await axios({
                url:'http://localhost:3007/book',
                method : 'put',
                data:{_id,name,author,price}
            })
            window.location = '/books.html'
         }











    </script>
</body>
</html>